<!DOCTYPE html>
<html class="ui-page-login" >
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<title>评委注册</title>
	<link href="../../css/mui.css" rel="stylesheet"/>
	<link href="../../css/reset.css" rel="stylesheet"/>
	<link rel="stylesheet" href="../../css/iconfont.css" />
	<link rel="stylesheet" href="../../css/pingwei.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="full-screen" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
	<meta name="format-detection" content="telephone=no"/>
	<meta name="format-detection" content="address=no">
	<script src="../../js/jquery.min.js"></script>
	<script type="text/javascript">
		var docEl = document.documentElement;
		var clientWidth = docEl.clientWidth;
		docEl.style.fontSize = (clientWidth / 10) + 'px';
		$(document).ready(function () {
			(function (doc, win) {
				var docEl = doc.documentElement,
						resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
						recalc = function () {
							var clientWidth = docEl.clientWidth;
							docEl.style.fontSize = (clientWidth / 10) + 'px';
						};

				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		});
	</script>
</head>

<body>
<article class="mui-content pingweizhuce">
	<form id='pingwei-sign'>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">姓名/Name</span>
			<input class="pingwei-zhuce-main-down" name="name">
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">性别/Gender</span>
			<select class="mui-btn mui-btn-block pingwei-sex" id="psex" onchange="change()">
				<option value="male" data-type="1">男/Man</option>
				<option value="famale" data-type="2">女/Woman</option>
			</select>
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">职业/Occupation</span>
			<input class="pingwei-zhuce-main-down" name="zhiye">
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">所在地/Location</span>
			<input class="pingwei-zhuce-main-down" name="dizhi">
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">资质/Qualification</span>
			<select class="mui-btn mui-btn-block pingwei-sex" id="pid" onchange="zizhi()">
				<option data-id="1">1</option>
				<option data-id="2">2</option>
			</select>
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">资质ID/Qualification ID</span>
			<input class="pingwei-zhuce-main-down" name="zizhi">
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">上传照片/Upload photos</span>
			<div class="pingwei-zhuce-main-down-m pingwei-xiangpian">
				<a class="fujia"  >+</a>
			</div>
			<a class="chongxinshangchuan">重新上传</a>
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">评委履历/Resume of the judges</span>
			<textarea class="pingwei-zhuce-main-down-t pingwei-lvli" ></textarea>
		</div>
		<div class="pingwei-zhuce-main">
			<span class="pingwei-zhuce-main-top">其他说明/Other instructions</span>
			<textarea class="pingwei-zhuce-main-down-t pinwei-qita"></textarea>
		</div>
	</form>
</article>
<nav class="mui-bar mui-bar-tab saishidetai-tab">
	<a class="saishidetai-tab-baom" id="pingweizhuce">注册/Registered</a>
</nav>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/jquery.validate.js"></script>
<script src="../../js/queryString.js"></script>
<script type="text/javascript" src="../../js/mui.picker.js" ></script>
<script type="text/javascript" src="../../js/mui.poppicker.js">	</script>
<script src="../../js/main.js"></script>
<script src="../../js/sign.js"></script>
<script>
	$('.fujia').click(function() {
		console.log(1);
		if(mui.os.plus) {
			var a = [{
				title: "拍照"
			}, {
				title: "从手机相册选择"
			}];
			plus.nativeUI.actionSheet({
				title: "修改用户头像",
				cancel: "取消",
				buttons: a
			}, function(b) { /*actionSheet 按钮点击事件*/
				switch(b.index) {
					case 0:
						break;
					case 1:
						getImage(); /*拍照*/
						break;
					case 2:
						galleryImg(); /*打开相册*/
						break;
					default:
						break;
				}
			})
		}
	});

	function getImage() {
		var c = plus.camera.getCamera();
		c.captureImage(function(e) {
			plus.io.resolveLocalFileSystemURL(e, function(entry) {
				var s = entry.toLocalURL() + "?version=" + new Date().getTime();
				uploadHead(s); /*上传图片*/
			}, function(e) {
				console.log("读取拍照文件错误：" + e.message);
			});
		}, function(s) {
			console.log("error" + s);
		}, {
			filename: "_doc/head.png"
		})
	}

	function galleryImg() {
		plus.gallery.pick(function(a) {
			plus.io.resolveLocalFileSystemURL(a, function(entry) {
				plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
					root.getFile("head.png", {}, function(file) {
						//文件已存在
						file.remove(function() {
							console.log("file remove success");
							entry.copyTo(root, 'head.png', function(e) {
										var e = e.fullPath + "?version=" + new Date().getTime();
										uploadHead(e); /*上传图片*/
										//变更大图预览的src
										//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
									},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
						}, function() {
							console.log("delete image fail:" + e.message);
						});
					}, function() {
						//文件不存在
						entry.copyTo(root, 'head.png', function(e) {
									var path = e.fullPath + "?version=" + new Date().getTime();
									uploadHead(path); /*上传图片*/
								},
								function(e) {
									console.log('copy image fail:' + e.message);
								});
					});
				}, function(e) {
					console.log("get _www folder fail");
				})
			}, function(e) {
				console.log("读取拍照文件错误：" + e.message);
			});
		}, function(a) {}, {
			filter: "image"
		})
	};

	function uploadHead(imgPath) {
		console.log("imgPath = " + imgPath);
		mainImage.src = imgPath;
		mainImage.style.width = "60px";
		mainImage.style.height = "60px";

		var image = new Image();
		image.src = imgPath;
		image.onload = function() {
			var imgData = getBase64Image(image);
			/*在这里调用上传接口*/
			// mui.ajax("图片上传接口", {
			// data: {
			//
			// },
			// dataType: 'json',
			// type: 'post',
			// timeout: 10000,
			// success: function(data) {
			// console.log('上传成功');
			// },
			// error: function(xhr, type, errorThrown) {
			// mui.toast('网络异常，请稍后再试！');
			// }
			// });
		}
	}
	//将图片压缩转成base64
	function getBase64Image(img) {
		var canvas = document.createElement("canvas");
		var width = img.width;
		var height = img.height;
		// calculate the width and height, constraining the proportions
		if(width > height) {
			if(width > 100) {
				height = Math.round(height *= 100 / width);
				width = 100;
			}
		} else {
			if(height > 100) {
				width = Math.round(width *= 100 / height);
				height = 100;
			}
		}
		canvas.width = width; /*设置新的图片的宽度*/
		canvas.height = height; /*设置新的图片的长度*/
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, width, height); /*绘图*/
		var dataURL = canvas.toDataURL("image/png", 0.8);
		return dataURL.replace("data:image/png;base64,", "");
	}
</script>

<script>
	function change(){
		var a =$('#psex').val();
		var b =$('#psex option:selected').data('type');
		a = b;
		console.log(a);
	}
	function zizhi(){
		var a =$('#pid').val();
		var b =$('#pid option:selected').data('id');
		a = b;
		console.log(a);
	}
</script>

</body>

</html>
